var express = require('express');
var fs = require('fs')
var path = require('path')
var app = express();
// 定义全局的Vue为了服务端的app.js
global.Vue = require('vue');
var compression = require('compression');
// 获取HTML布局
var layout = fs.readFileSync('./assets/index.html', 'utf8')
// 拆分布局成两段HTML
var layoutSections = layout.split('<div id="app"></div>')
var preAppHTML = layoutSections[0]
var postAppHTML = layoutSections[1]
// 创建一个渲染器
var renderer = require('vue-server-renderer').createRenderer();
app.get('/a',function(req,response){
  // 渲染我们的Vue应用为一个字符串
  renderer.renderToString(
    // 创建一个应用实例
    require('./assets/app')(),
    // 处理渲染结果
    function (error, html) {
      // 如果渲染时发生了错误
      if (error) {
        // 打印错误到控制台
        console.error(error)
        // 告诉客户端错误
        return response
          .status(500)
          .send('Server Error')
      }
      // 发送布局和HTML文件
      response.send(layout.replace('<div id="app"></div>', html))
    }
  )
})
app.get('/',function(req,response){
  response.setHeader("Content-type", "text/html;charset=UTF-8"); 
  
  // 渲染我们的Vue实例作为流
  var stream = renderer.renderToStream(require('./assets/app')())
  // 将预先的HTML写入响应
  response.write(preAppHTML)
  // 每当新的块被渲染
  stream.on('data', function (chunk) {
    // 将块写入响应
    response.write(chunk)
  })
  // 当所有的块被渲染完成
  stream.on('end', function () {
    // 将post-app HTML写入响应
    response.end(postAppHTML)
  })
  // 当渲染时发生错误
  stream.on('error', function (error) {
    // 打印错误到控制台
    console.error(error)
    // 告诉客服端发生了错误
    return response
      .status(500)
      .send('Server Error')
  })
});

const Cmp = Vue.component('my-cmp', {
  template: `<p>this is a component</p>`,
});

const App = Vue.component('my-app', {
  components: {
    MyCmp:Cmp
  },
  template: `
    <div class="server-uptime">
      <h1 v-on:click="age+=1" a="b">{{name}}</h1>
      <h2>age {{age}}</h2>
      <my-cmp></my-cmp>
    </div>
  `
});
const vm = new App({
  data: {
    name: 'Hans',
    age: 18,
  }
})
app.get('/b',function(req,response){
  renderer.renderToString(vm, (err, html) => {
    if (err){
      console.error(err.message);
      console.error(err.stack);
    }
    response.send(layout.replace('<div id="app"></div>', '<div id="app"></div>'+html))
  });
})


const vueEasyRenderer = require('vue-easy-renderer').connectRenderer;
const rendererb = vueEasyRenderer(path.resolve(__dirname, './component'),{});
app.use(rendererb);
app.get('/index',function (req, res) {
   res.vueRender('hello.vue', {world: 'world!'})
});


// var vueRender = require('vue-ssr')
// var serverConfig = require('./assets/webpack.server')
// var indexRenderer = vueRender({
//     projectName: 'index', 
//     rendererOptions: {
//         cache: require('lru-cache')({
//             max: 1000,
//             maxAge: 1000 * 60 * 15
//         })
//     }, 
//     webpackServer: serverConfig
// })

// 部署静态文件夹为 "assets"文件夹
app.use('/assets', express.static(
  path.resolve(__dirname, 'assets')
))
app.get('/get', function (req, res) {
    res.send('{a}')
})
module.exports=app;